import React, {
  useEffect,
  useState,
  useImperativeHandle,
  forwardRef,
} from 'react';
import './index.less';
import { Modal } from 'antd';
import { RollbackOutlined } from '@ant-design/icons';

import IrrCase from '@/components/myCase';

interface Props {
  children: any;
  ref?: any;
  [key: string]: any;
  onOk?: Function;
  onPointCancel?: Function;
  onPointConfirm?: Function;
  className?: string;
  containterClass?: string;
  pageStatus?: string;
  hiddenBtnClass?: string;
  actionsGroup?: any[];
  collectStyle?: anyObject;
  rightBtnsInfo?: anyObject;
}
const ActionPoint = (props: Props, ref: any) => {
  const [isShow, setIsShow] = useState<boolean>(false);
  const {
    title = '',
    children,
    transCancel,
    transConfirm,
    containterClass = '',
    pageStatus = 'view',
    onPointCancel,
    onPointConfirm,
    hiddenBtnClass = '',
    actionsGroup = [],
    collectStyle = {},
    rightBtnsInfo = {
      saveText: '保存',
      rebackText: '返回',
      isSave: true,
      isReback: true,
    },
  } = props;

  useImperativeHandle(ref, () => {
    return {
      customOpen,
    };
  });
  const onHandleCancel = () => {
    handleCancel();
    transCancel && transCancel();
  };
  const handleCancel = () => {
    setIsShow(false);
  };

  const onHandleConfirm = () => {
    transConfirm && transConfirm();
    if (transConfirm) {
      transConfirm();
    } else {
      handleCancel();
    }
  };

  let customCallBack: any = null;

  const customOpen = (callBack?: Function) => {
    if (callBack) {
      customCallBack = callBack;
    }
    setIsShow(true);
  };
  useEffect(() => {
    if (!isShow && !customCallBack) {
      return;
    }
    const timeout = setTimeout(() => {
      customCallBack();
    }, 20);
    return () => {
      clearTimeout(timeout);
    };
  }, [customCallBack, isShow]);

  const handleSaveForm = () => {
    onPointConfirm && onPointConfirm();
  };
  const handleRebackForm = () => {
    onPointCancel && onPointCancel();
  };
  return (
    <>
      <div className={`action-point__containter ${containterClass}`}>
        <div className={`action__opt ${hiddenBtnClass}`}>
          {rightBtnsInfo.isSave && pageStatus !== 'view' ? (
            <button
              onClick={handleSaveForm}
              className="common-button action_opt__save"
            >
              {rightBtnsInfo.saveText}
            </button>
          ) : null}
          {rightBtnsInfo.isReback ? (
            <span className="action_opt__reback" onClick={handleRebackForm}>
              <RollbackOutlined />
              <span className="action_opt__text">
                {' '}
                {rightBtnsInfo.rebackText}
              </span>
            </span>
          ) : null}
        </div>
        <IrrCase className="action__content" title={title} showHeader={true}>
          <div className="action_content__collection">
            {actionsGroup && actionsGroup.length > 0 ? (
              <div className="content_collection__btns">{actionsGroup}</div>
            ) : null}
            <div className="content_collection__main">
              <div
                className="content_collection__absolute"
                style={collectStyle}
              >
                {children}
              </div>
            </div>
          </div>
        </IrrCase>
      </div>
    </>
  );
};

export default forwardRef(ActionPoint);
